<template>
  <div class="equip-tooltip" :class="{ isWear }">
    <div class="top equip-flex">
      <div class="icon">
        <img :src="$imgCatelog.equip[equip.icon]" alt="图标" />
        <div class="equip-icon" :class="'grade' + equip.grade"></div>
      </div>
      <div class="name equipName" :class="'grade' + equip.grade">
        {{ equip.name }}
      </div>
    </div>
    <!-- <div class="id">id:&nbsp;{{ equip.id }}</div> -->
    <div class="qual equip-flex equip-between">
      <div class="level">等级:&nbsp;Lv{{ equip.level }}</div>
      <div class="grade equipName" :class="'grade' + equip.grade">
        品质:&nbsp;{{ gradeName[equip.grade] }}
      </div>
      <div class="type">部位:&nbsp;{{ typesNames[equip.type] }}</div>
    </div>
    <div class="props">
      <div v-for="(o, i) of equip.props" :key="i + 'props'">
        {{ o.name }}&nbsp;{{ o.value > 0 ? "+" : "" }}{{ o.value
        }}{{ o.isPercent ? "%" : "" }}
      </div>
    </div>
    <div class="entry">
      <div v-for="(o, i) of equip.entry" :key="i + 'entry'">
        {{ o.name }}&nbsp;{{ o.value > 0 ? "+" : "" }}{{ o.value
        }}{{ o.isPercent ? "%" : "" }}
      </div>
    </div>
    <div class="pre colorful" v-if="equip.pre">
      <div>{{ equip.pre.affName }}:</div>
      <div v-for="(o, i) of equip.pre.affProps" :key="i + 'pre'">
        {{ o.name }}&nbsp;{{ o.value > 0 ? "+" : "" }}{{ o.value
        }}{{ o.isPercent ? "%" : "" }}
      </div>
    </div>
    <div class="suf colorful" v-if="equip.suf">
      <div>{{ equip.suf.affName }}:</div>
      <div v-for="(o, i) of equip.suf.affProps" :key="i + 'suf'">
        {{ o.name }}&nbsp;{{ o.value > 0 ? "+" : "" }}{{ o.value
        }}{{ o.isPercent ? "%" : "" }}
      </div>
    </div>
    <div class="describe">{{ equip.describe }}</div>
    <div class="price">
      {{ equip.price }}
      <i class="ewg-icon-jinbi"></i>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive } from "vue";
import { Equipment } from "@/const/equips/equipmentType";
import { equipGradeName, equipTypesNames } from "@/const/equips/equipConst";
const EquipTooltip = defineComponent({
  name: "EquipTooltip",
  props: {
    equip: {
      type: [Equipment, Object],
      require: true
    },
    isWear: {
      type: Boolean,
      default: false
    }
  },
  setup() {
    const gradeName = reactive(equipGradeName);
    const typesNames = reactive(equipTypesNames);
    return {
      gradeName,
      typesNames
    };
  }
});
export default EquipTooltip;
</script>
<style lang="scss" scoped>
.equip-tooltip {
  width: 300px;
  min-height: 100px;
  border: 3px solid $--color-white;
  border-radius: $--border-radius;
  background: $--color-black-half-quarter;
  overflow: hidden;
  box-sizing: border-box;
  padding: 10px;
  color: #fcfcfc;
  font-size: 14px;
  word-break: break-all;
  &.isWear {
    border-color: #49c628;
  }
  .top {
    margin-bottom: 5px;
    .icon {
      margin-right: 4px;
      width: 28px;
      height: 28px;
      position: relative;
      overflow: hidden;
      border-radius: 4px;
      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }
  }
  .equip-flex {
    display: flex;
    &.equip-between {
      justify-content: space-between;
    }
  }
  .qual {
    margin-top: 10px;
    margin-bottom: 5px;
  }
  .id {
    font-size: 12px;
    color: #9a9a9a;
  }
  .level {
    color: #49c628;
  }
  .describe {
    border-top: 1px solid $--color-white-quarter;
    color: #cccccc;
    margin-top: 10px;
    margin-bottom: 5px;
    padding-top: 10px;
    word-break: break-all;
  }
  .price {
    text-align: right;
    color: $--color-gold;
  }
  .props,
  .entry {
    color: #ffc600;
  }
  .pre,
  .suf {
    margin-top: 5px;
  }
  .colorful {
    background-image: -webkit-gradient(
      linear,
      left top,
      right top,
      color-stop(0, #f22),
      color-stop(0.15, #f2f),
      color-stop(0.3, #22f),
      color-stop(0.45, #2ff),
      color-stop(0.6, #2f2),
      color-stop(0.75, #2f2),
      color-stop(0.9, #ff2),
      color-stop(1, #f22)
    );
    color: transparent;
    background-clip: text;
    animation: ran 40s linear infinite;
  }
}
@keyframes ran {
  0% {
    backgroud-position: 0 0;
  }
  50% {
    background-position: 1000px 0px;
  }
  100% {
    backgroud-position: 0 0;
  }
}
</style>
